<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('自定义下拉选项内容')}`">{{ $t('自定义下拉选项内容') }}</t>
        </template>
        <div style="width: 300px;color:#666;">
            <sib-item v-model="value" :props="props">
                <template #option="{ option }">
                    <span>{{ option.label }}<span style="color: pink;">（value：{{ option.value }}）</span></span>
                </template>
            </sib-item>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'select',
            options: Array(30).fill().map((_, i) => ({ label: `选项${i}`, value: i })),
        });

        return {
            props,
            value,
            templateString: `<template>
    <sib-item v-model="value" :props="props" @change="change">
        <template #option="{ option }">
            <span>{{ option.label }}<span style="color: pink;">（value：{{ option.value }}）</span></span>
        </template>
    </sib-item>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'select',
            options: Array(30).fill().map((_, i) => ({ label: \`选项\${i}\`, value: i })),
        });

        return { props, value };
    },
};
<\/script>`,
        };
    },
};
</script>
